<!--
 * @Author: Bennty
 * @Date: 2024-08-19 15:06:08
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-09-27 16:26:53
 * @Description: 请填写简介
-->
<template>
    <el-form-item label="部件">
        <el-row :gutter="10">
            <el-col :span="11">
                <el-input v-model="componentData.componentName"></el-input>
            </el-col>
            <el-col :span="11">
                <el-select v-model="componentData.componentType" @change="handleSelectChange">
                    <el-option v-for="item in props.componentType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-col>
            <el-col :span="2">
                <el-button type="danger" icon="Close" text @click="handleClickDelete"></el-button>
            </el-col>
        </el-row>
    </el-form-item>
</template>

<script setup lang="ts">
const props = defineProps(['data','index','componentType']);
const emits = defineEmits(['transmitData','delete']);

const componentData = computed(()=>{
    return props.data
});

const handleSelectChange = ()=>{
    emits('transmitData',componentData.value)
};

const handleClickDelete = ()=>{
    emits('delete');
};

</script>

<style scoped>

</style>